<template>
	<view>
		<view class="status_bar">
				<!-- 这里是状态栏 -->
		</view>
		<!-- 图片 -->
		<view v-if="orderInfo.state != 0" style="margin-top: 120rpx;text-align: center;">
			<image src="/static/order/xiadanchenggong.png" style="width: 250rpx;height: 230rpx;" mode=""></image>
			<view style="font-size: 36rpx; font-weight: bold;margin-top: 23rpx;">订单已生成</view>
			<view class="u-m-t-68" style="padding: 0 78rpx;height: 343rpx;position: relative;">
				<image src="/static/order/img_xbg.png" style="width:100%;height: 100%;" mode=""></image>
				<view style="position: absolute;top:22%;left:50%; transform: translate(-50%,-50%);font-size: 50rpx;">
					￥{{ orderInfo.actualAmount }}
				</view>
				<view class="bg-content">
					<view class="u-m-b-14">订单编号：<text class="u-font-28" :selectable="true">{{ orderInfo.tradeNo }}</text></view>
					<view class="u-m-b-14">下单时间：{{ orderInfo.createdTime}}</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-60 u-text-center">
			<!-- 线下支付 -->
			<!-- <text class="badge-color u-font-26">账号无支付功能，请联系管理员。 <br>请在24小时内完成支付，超时订单自动取消。</text> -->
			<!-- 月结支付 -->
			<text class="badge-color u-font-26" v-if="!orderInfo.isPayment">订单已经生成，您的账号无支付功能，请联系相关人员尽快处理。</text>
			<text class="badge-color u-font-26" v-if="orderInfo.isPayment"><br>订单已经生成，请尽快前往详情页支付！</text>
			<text class="badge-color u-font-26" v-if="orderInfo.settlementMethod!=0"><br>您的合约支持先货后款，您可以暂不支付此订单，<br />我们将正常发货~</text>
		</view>
		<view class="u-flex u-row-center" style="margin-top: 120rpx;">
			<view class="u-m-r-60">
				<u-button shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('plain', 200, 80)" @click="toPage">回首页</u-button>
			</view>
			<view>
				<u-button v-if="orderInfo.isPayment" shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('default', 200, 80)" @click="$mRouter.redirectTo({ route: '/pages/purchase/order/details?id=' + orderInfo.id })">{{orderInfo.settlementMethod!=0?'订单详情':"去支付"}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				orderInfo: {}
			}
		},
		onLoad(option) {
			this.orderInfo = option;
			console.log(option);
		},
		computed:{
			...mapState(orderStore, ['paymentMethod'])
		},
		methods: {
			toPage() {
				this.$mRouter.switchTab({ route: '/pages/index/index', success() {
					let page = getCurrentPages().pop();  //跳转页面成功之后
					if (!page) return;  
					page.onLoad(); //如果页面存在，则重新刷新页面
				}})
			},
			payment(value) {
				return this.paymentMethod.find(item => {
					return item.value = value
				}).label
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-content {
		position: absolute;
		text-align: left;
		width: 100%;
		bottom: 15%;
		left: 18%;
		// left: 50%;
		// transform: translateX(-50%);
		// padding-left: 140rpx;
		// padding: 0 auto;
		// transform: translate(-50%,-50%);
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
